<template>
	<view class="container margin-lr">
		<use-navbar ref="navbar" title="优惠券使用"></use-navbar>
		<view class="border-radius margin-top-sm">
			<use-list-title title="使用号码" iconfont=" " @goto="toEdit('mobile', '使用号码', 11)"
				:tip="mobile || '未填写'"></use-list-title>
		</view> 
		<view @click="copy" style="padding: 20rpx;color: red;">点击复制链接去使用</view>
		<view class="btn-container dflex-b margin-lr  border-radius-big" style="margin-top: 50rpx;">
			<view class="tac padding-tb-sm flex1 bg-base" @click="toExchange">立即使用</view>
		</view>
		<use-popup v-model="editShow" bgclass=" " mode="top">
			<view class="oper-area border-radius bg-main pos-r">
				<view class="pos-a pos-top pos-right padding-sm" @click="editShow = false">
					<view class="iconfont iconguanbi"></view>
				</view>

				<view class="dflex-b ft-dark fs-xs margin-bottom-sm margin-lr-xs">
					<view>修改{{editTxt}}</view>
					<view>{{editVal.length}}/{{editMaxLength}}</view>
				</view>
				<view class="dflex border-radius-sm field" style="padding: 18rpx 16rpx">
					<textarea class="fwb fs-sm" type="text" v-model="editVal" auto-height disable-default-padding
						style="max-height: 160rpx; min-height: 40rpx; height: 40rpx; font: initial;" :focus="editShow"
						confirm-type="done" :show-confirm-bar="false" cursor-spacing="20" placeholder="请输入"
						placeholder-class="fs-sm" :maxlength="editMaxLength" @confirm="editConfirm" />
				</view>

				<view class="bg-base margin-top-xl tac w-full border-radius-lg padding-tb-sm" @click.stop="editConfirm">
					提交
				</view>
			</view>
		</use-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		computed: {
			...mapState(['islogin', 'member']),
		},
		data() {
			return {
				id:"",
				editShow: false,
				editKey: '',
				editVal: '',
				editTxt: '',
				editMaxLength: 30,
				mobile: '',
			}
		},
		onLoad(options) {
			this.id=options.id
			if(options.mobile){
				this.mobile=options.mobile
			}
			this.loadData()
		},
		methods: {
			toEdit(key, txt, len) {
				this.editShow = true;
				this.editKey = key;
				this.editTxt = txt;
				this.editMaxLength = len;
			},
			copy() {
				let _this = this
				uni.setClipboardData({
					data: 'http://catering.wmeizi.com/fgwzDownLoad/index.html',
					success: function() {
						_this.$api.alert('复制链接成功,请到手机浏览器粘贴下载使用,登录账号为' + _this.mobile + '默认登录密码为888888',
						function() {})
					}
				});
			},
			loadData() {
				// this.$func.wmzmall.call('member/get_coupon', {
				// 	id: this.id
				// }).then(res => {
				// 	if (res.code === 200) {
				// 		this.formData = res.datas.data[0]
				// 	}
				// });

			},
			editConfirm() {
				let data = {};
				data[this.editKey] = this.editVal.replace(/\n/g, '').replace(/\r\n/g, '').trim();
				if (!data[this.editKey]) {
					this.$api.msg('请填写' + this.editTxt);
					return;
				}
				this.mobile = data[this.editKey]
				this.editShow = false;
				this.editVal = '';
			},
			toExchange() {
				if (!this.mobile) {
					this.$api.msg('请先输入登录手机号码');
					return
				}
				this.$func.wmzmall.call('member/use_coupon', {
					id:this.id,
					mobile: this.mobile
				}).then(res => {
					if (res.code === 200) {
						// this.$api.alert('已发送使用短信到该手机号码,登录账号为'+_this.mobile+',默认登录密码为888888,', function() {})
						let _this = this
						uni.setClipboardData({
							data: 'http://catering.wmeizi.com/fgwzDownLoad/index.html',
							success: function() {
								_this.$api.alert('复制链接成功,请到手机浏览器粘贴下载使用,登录账号为' + _this.mobile +
									'默认登录密码为888888',
									function() {})
							}
						});
					} else {
						this.$api.msg(res.msg);
					}
				});
			}
		}
	}
</script>


<style lang="scss">
	page,
	.container {
		min-height: 100%;
		background: $page-color-base;
	}

	.oper-area {
		width: 80vw;
		padding: 80rpx;
		padding-top: 100rpx;
		margin-top: 20vh;
		margin-left: 10vw;

		.field {
			background-color: #f5f5f5;
		}
	}
</style>